<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/public.css">
</head>

<body>
    <video id="myVideo" width="320" height="240" controls >
        <source src="./video/杨宗纬 - 越过山丘 (致李宗盛).mp4" type="video/mp4">
    </video>
    <canvas id="myCanvas" width="320" height="200" style="border:1px solid #d3d3d3;"></canvas>

    <button class="play" onclick="playd()">播放</button>
    <button class="pause" onclick="paused()">暂停</button>
    <script>
        var video = document.getElementById('myVideo');
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        window.addEventListener('load',function(){
            setInterval(function(){
                ctx.drawImage(video,0,0,c.width, c.height);     
            },20);
        })
        
        function playd(){
            video.play();
        }
        function paused(){
            video.pause();
        }
        video.addEventListener('timeupdate',function(){
            // console.log(video.currentTime/video.duration*100);
            
        })
        // ctx.fillStyle = '#ffffff';
        
    </script>
</body>

</html>